<template>
    <el-dialog style="margin-top: 10px;margin-bottom: 20px;" top="10px;"
               width="80%"
               title="查询区域"
               :visible.sync="visible"
               append-to-body
               :close-on-click-modal="false">
        <div :style="{height: fullHeight - 140 +'px'}">
            <el-form :model="cpyAreaObj" ref="deptArea" :rules="rules" :inline="true">
                <div>
                    <el-row>
                        <el-form-item label="所属省份:" prop="provinceCode">
                            <el-select style="width: 150px" id="provinceNameCpy" v-model="cpyAreaObj.provinceCode"
                                       @visible-change="handNeedProvinceCpy" @change="changeProvCpy" placeholder="请选择">
                                <el-option
                                        v-for="(item, indexkey) in itProvinceArrCpy"
                                        :key="item.areaCode"
                                        :value="item.areaCode"
                                        :label="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所属城市:" prop="cityCode">
                            <el-select style="width: 150px" id="cityNameCpy" v-model="cpyAreaObj.cityCode"
                                       @focus="getCitieListCpy(cpyAreaObj.provinceCode)" @change="changeCityCpy"
                                       placeholder="请选择">
                                <el-option
                                        v-for="(item, indexkey) in itCityArrCpy"
                                        :key="item.areaCode"
                                        :value="item.areaCode"
                                        :label="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所属区域:" prop="regionCode">
                            <el-select style="width: 150px" id="regionNameCpy" v-model="cpyAreaObj.regionCode"
                                       @focus="getAreaListCpy(cpyAreaObj.cityCode)" @change="changeRegionCpy"
                                       placeholder="请选择">
                                <el-option
                                        v-for="(item, indexkey) in itAreaArrCpy"
                                        :key="item.areaCode"
                                        :value="item.areaCode"
                                        :label="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所属街道:" prop="streetCode">
                            <el-select style="width: 200px" id="streetNameCpy" v-model="cpyAreaObj.streetCode"
                                       @focus="getStreetListCpy(cpyAreaObj.regionCode)" @change="changeStreetCyp"
                                       placeholder="请选择">
                                <el-option
                                        v-for="(item, indexkey) in itStreetArrCpy"
                                        :key="item.areaCode"
                                        :value="item.areaCode"
                                        :label="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-button @click="findDeptAreaEntityByAreaCode()" type="primary">
                            查询
                        </el-button>
                        <el-button @click="clearForm('deptArea')">
                            清空
                        </el-button>
                    </el-row>

                </div>
            </el-form>
            <div>
                <el-table
                        height="660px"
                        :data="deptAreaList"
                        @selection-change="handleSelectionChange"
                        border
                        style="width: 100%;line-height: 30px;">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="provinceCode"
                            align="center"
                            label="省编码"
                            width="70"
                            height="50"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="provinceName"
                            align="center"
                            label="省"
                            width="100"
                            height="50"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="cityCode"
                            align="center"
                            label="市编码"
                            width="100"
                            height="50"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="cityName"
                            align="center"
                            label="市"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="regionCode"
                            align="center"
                            label="区编码"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="regionName"
                            align="center"
                            label="区"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="streetCode"
                            align="center"
                            label="街道编码"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="streetName"
                            align="center"
                            label="街道"
                            width="220">
                    </el-table-column>
                    <el-table-column
                            prop="communityCode"
                            align="center"
                            label="社区编码"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="communityName"
                            align="center"
                            label="社区">
                    </el-table-column>
                </el-table>
            </div>
            <div style="margin-top: 20px;text-align: right">
                <el-button @click="areaAdd()"  type="primary">
                    添加区域
                </el-button>
            </div>
        </div>

    </el-dialog>
</template>

<script>
    export default {
        props:["deptCode"],
        data() {
            return {
                deptAreaList: [],
                rules: {
                    provinceCode: [
                        {required: true, message: '请选择省', trigger: 'blur'},
                    ],
                    cityCode: [
                        {required: true, message: '请选择市', trigger: 'blur'}
                    ],
                    regionCode: [
                        {required: true, message: '请选择区域', trigger: 'blur'}
                    ],
                },
                visible: false,
                fullHeight: document.documentElement.clientHeight,
                waitFlag: false,
                //公司在用基本地区
                cpyAreaObj: {
                    provinceCode: "",
                    cityCode: "",
                    regionCode: "",
                    streetCode: "",
                    communityCode: "",

                    provinceName: "",
                    cityName: "",
                    regionName: "",
                    streetName: "",
                    communityName: ""
                },
                itProvinceArrCpy: [],
                itCityArrCpy: [],
                itAreaArrCpy: [],
                itStreetArrCpy: [],
                itCommunityArrCpy: [],
                //全国基本地区
                baseAreaObj: {

                    provinceCode: "",
                    cityCode: "",
                    regionCode: "",
                    streetCode: "",
                    communityCode: "",

                    provinceName: "",
                    cityName: "",
                    regionName: "",
                    streetName: "",
                    communityName: "",
                },
                itProvinceArrBase: [],
                itCityArrBase: [],
                itAreaArrBase: [],
                itStreetArrBase: [],
                itCommunityArrBase: [],
                selectAreas:[],
            }
        },

        watch: {
            fullHeight(val) {
                if (!this.timer) {
                    this.fullHeight = val
                    this.timer = true
                    let that = this
                    setTimeout(function () {
                        that.timer = false
                    }, 400)
                }
            },
        },
        updated() {
            const that = this
            window.onresize = () => {
                return (() => {
                    window.fullHeight = document.documentElement.clientHeight
                    that.fullHeight = window.fullHeight
                })()
            }
        },
        methods: {
            handleSelectionChange(val){
                var vm = this;
                vm.selectAreas = val;
            },

            areaAdd(){
              var vm = this;
              if (vm.selectAreas.length==0){
                  this.$alert('请选择要添加的需求区域！', '操作错误', {
                      confirmButtonText: '确定',
                      callback: action => {
                      }
                  });
              }else{
                  var vm = this;
                  var obj = {};
                  obj.deptCode = vm.deptCode;
                  obj.deptAreaEntityList = vm.selectAreas;
                  var options = {
                      method: 'POST',
                      data: obj,
                      url: "dept/deptAreaAdd",
                  };
                  this.$ajax(
                      options
                  ).then(function (response) {
                      vm.$notify.success(response.data.message);
                      vm.visible=false;
                      vm.$emit("changeDeptArea");
                  }).catch(function (error) {
                      vm.$notify({
                          showClose: true,
                          message: '页面:新增部门负责区域失败!',
                          type: 'error'
                      });
                  });
              }
            },
            findDeptAreaEntityByAreaCode() {
                var vm = this;
                var obj = {};
                obj.regionCode = vm.cpyAreaObj.regionCode;
                obj.streetCode = vm.cpyAreaObj.streetCode;
                var options = {
                    method: 'POST',
                    data: obj,
                    url: "dept/findDeptAreaEntityByAreaCode",
                };
                this.$ajax(
                    options
                ).then(function (response) {
                    vm.deptAreaList = response.data.result;
                }).catch(function (error) {
                    vm.$notify({
                        showClose: true,
                        message: '页面:查询省份信息失败!cpyArea/queryNoPage',
                        type: 'error'
                    });
                });
            },
            clearForm(name) {
                var vm = this;
                vm.$refs[name].resetFields();
            },
            changeStreetCyp(aval) {
                this.cpyAreaObj.communityCode = "";
            },

            changeRegionCpy(aval) {
                //清空code
                this.cpyAreaObj.streetCode = "";
                this.cpyAreaObj.communityCode = "";
            },
            changeCityCpy(aval) {
                //清空code
                this.cpyAreaObj.regionCode = "";
                this.cpyAreaObj.streetCode = "";
                this.cpyAreaObj.communityCode = "";
            },

            changeProvCpy(aval) {
                //清空code
                this.cpyAreaObj.cityCode = "";
                this.cpyAreaObj.regionCode = "";
                this.cpyAreaObj.streetCode = "";
                this.cpyAreaObj.communityCode = "";
            },

            changeCommunityBase(aval) {
                //赋值街道name
                let areaObj = {};
                areaObj = this.itCommunityArrBase.find((item) => {
                    return item.areaCode === aval;
                });
                this.baseAreaObj.communityName = areaObj.name;
            },

            /********/
            changeStreetBase(aval) {
                //赋值街道name
                let areaObj = {};
                areaObj = this.itStreetArrBase.find((item) => {
                    return item.areaCode === aval;
                });
                this.baseAreaObj.streetName = areaObj.name;
            },

            changeRegionBase(aval) {
                this.baseAreaObj.streetCode = "";
                //赋值县区name
                let areaObj = {};
                areaObj = this.itAreaArrBase.find((item) => {
                    return item.areaCode === aval;
                });
                this.baseAreaObj.regionName = areaObj.name;
                //清空name
                this.baseAreaObj.streetName = "";
            },

            changeCityBase(aval) {
                this.baseAreaObj.regionCode = "";
                this.baseAreaObj.streetCode = "";

                //赋值市name
                let areaObj = {};
                areaObj = this.itCityArrBase.find((item) => {
                    return item.areaCode === aval;
                });
                this.baseAreaObj.cityName = areaObj.name;
                //清空name
                this.baseAreaObj.regionName = "";
                this.baseAreaObj.streetName = "";
            },

            changeProvBase(aval) {
                //清空code
                this.baseAreaObj.cityCode = "";
                this.baseAreaObj.regionCode = "";
                this.baseAreaObj.streetCode = "";

                //赋值省name
                let areaObj = {};
                areaObj = this.itProvinceArrBase.find((item) => {
                    return item.areaCode === aval;
                });
                this.baseAreaObj.provinceName = areaObj.name;
                //清空name
                this.baseAreaObj.cityName = "";
                this.baseAreaObj.regionName = "";
                this.baseAreaObj.streetName = "";


            },

            /*省份查询*/
            handNeedProvinceCpy(val) {
                var vm = this;
                var obj = {};
                obj.parentCode = 0;
                var sendObj = {};
                sendObj.entity = obj;
                var options = {
                    method: 'POST',
                    data: sendObj,
                    url: "cpyArea/queryNoPage",
                };
                this.$ajax(
                    options
                ).then(function (response) {
                    vm.itProvinceArrCpy = response.data.result;
                }).catch(function (error) {
                    vm.$notify({
                        showClose: true,
                        message: '页面:查询省份信息失败!cpyArea/queryNoPage',
                        type: 'error'
                    });
                });
            },

            /*市区查询*/
            getCitieListCpy(aVal) {
                if (aVal != "") {
                    var vm = this;
                    var obj = {};
                    obj.parentCode = aVal;
                    var sendObj = {};
                    sendObj.entity = obj;
                    var options = {
                        method: 'POST',
                        data: sendObj,
                        url: "cpyArea/queryNoPage",
                    };
                    this.$ajax(
                        options
                    ).then(function (response) {
                        vm.itCityArrCpy = response.data.result;
                    }).catch(function (error) {
                        vm.$notify({
                            showClose: true,
                            message: '页面:查询市区信息失败!cpyArea/queryNoPage',
                            type: 'error'
                        });
                    });
                }

            },

            /*区域查询*/
            getAreaListCpy(bVal) {
                if (bVal != "") {
                    var vm = this;
                    var obj = {};
                    obj.parentCode = bVal;
                    var sendObj = {};
                    sendObj.entity = obj;
                    var options = {
                        method: 'POST',
                        data: sendObj,
                        url: "cpyArea/queryNoPage",
                    };
                    this.$ajax(
                        options
                    ).then(function (response) {
                        vm.itAreaArrCpy = response.data.result;
                    }).catch(function (error) {
                        vm.$notify({
                            showClose: true,
                            message: '页面:查询区域信息失败!cpyArea/queryNoPage',
                            type: 'error'
                        });
                    });
                }
            },

            /*街道查询*/
            getStreetListCpy(aVal) {
                if (aVal != "") {
                    var vm = this;
                    var obj = {};
                    obj.parentCode = aVal;
                    var sendObj = {};
                    sendObj.entity = obj;
                    var options = {
                        method: 'POST',
                        data: sendObj,
                        url: "cpyArea/queryNoPage",
                    };
                    this.$ajax(
                        options
                    ).then(function (response) {
                        vm.itStreetArrCpy = response.data.result;
                    }).catch(function (error) {
                        vm.$notify({
                            showClose: true,
                            message: '页面:查询街道信息失败!cpyArea/queryNoPage',
                            type: 'error'
                        });
                    });
                }
            },
            /*街道查询*/
            getCommunityListCpy(aVal) {
                if (aVal != "") {
                    var vm = this;
                    var obj = {};
                    obj.parentCode = aVal;
                    var sendObj = {};
                    sendObj.entity = obj;
                    var options = {
                        method: 'POST',
                        data: sendObj,
                        url: "cpyArea/queryNoPage",
                    };
                    this.$ajax(
                        options
                    ).then(function (response) {
                        vm.itCommunityArrCpy = response.data.result;
                    }).catch(function (error) {
                        vm.$notify({
                            showClose: true,
                            message: '页面:查询社区信息失败!cpyArea/queryNoPage',
                            type: 'error'
                        });
                    });
                }
            },

            /*****全国地区方法******/

            /*省份查询*/
            handNeedProvinceBase(val) {
                var vm = this;
                var obj = {};
                obj.parentCode = 0;
                var sendObj = {};
                sendObj.entity = obj;
                var options = {
                    method: 'POST',
                    data: sendObj,
                    url: "baseArea/queryNoPage",
                };
                this.$ajax(
                    options
                ).then(function (response) {
                    vm.itProvinceArrBase = response.data.result;
                }).catch(function (error) {
                    vm.$notify({
                        showClose: true,
                        message: '页面:查询省份信息失败!baseArea/queryNoPage',
                        type: 'error'
                    });
                });
            },

            /*市区查询*/
            getCitieListBase(aVal) {
                if (aVal != "") {
                    var vm = this;
                    var obj = {};
                    obj.parentCode = aVal;
                    var sendObj = {};
                    sendObj.entity = obj;
                    var options = {
                        method: 'POST',
                        data: sendObj,
                        url: "baseArea/queryNoPage",
                    };
                    this.$ajax(
                        options
                    ).then(function (response) {
                        vm.itCityArrBase = response.data.result;
                    }).catch(function (error) {
                        vm.$notify({
                            showClose: true,
                            message: '页面:查询市区信息失败!baseArea/queryNoPage',
                            type: 'error'
                        });
                    });
                }

            },

            /*区域查询*/
            getAreaListBase(bVal) {
                if (bVal != "") {
                    var vm = this;
                    var obj = {};
                    obj.parentCode = bVal;
                    var sendObj = {};
                    sendObj.entity = obj;
                    var options = {
                        method: 'POST',
                        data: sendObj,
                        url: "baseArea/queryNoPage",
                    };
                    this.$ajax(
                        options
                    ).then(function (response) {
                        vm.itAreaArrBase = response.data.result;
                    }).catch(function (error) {
                        vm.$notify({
                            showClose: true,
                            message: '页面:查询区域信息失败!baseArea/queryNoPage',
                            type: 'error'
                        });
                    });
                }
            },

            /*街道查询*/
            getStreetListBase(aVal) {
                if (aVal != "") {
                    var vm = this;
                    var obj = {};
                    obj.parentCode = aVal;
                    var sendObj = {};
                    sendObj.entity = obj;
                    var options = {
                        method: 'POST',
                        data: sendObj,
                        url: "baseArea/queryNoPage",
                    };
                    this.$ajax(
                        options
                    ).then(function (response) {
                        vm.itStreetArrBase = response.data.result;
                    }).catch(function (error) {
                        vm.$notify({
                            showClose: true,
                            message: '页面:查询街道信息失败!baseArea/queryNoPage',
                            type: 'error'
                        });
                    });
                }


            }

        }//end methods
    }

</script>

<style scoped>

</style>